<template>
  <div>
    <el-row type="flex" class="ticket_main">
      <el-col :span="18" class="ticket_left" v-if="filghtsData.flights">
        <div class="screen">
          <!-- 筛选器 -->
          <FlightSelect :filghtsData="filghtsData" @filterData="filterData"></FlightSelect>
          <!-- 筛选器 -->
        </div>
        <!-- 航空信息 -->
        <div class="info">
          <FlightsHeader></FlightsHeader>
          <!-- 机票信息 -->
          <div class="fights_main" v-loading="loading">
            <!-- item -->
            <FlightsItem v-for="(item,index) of dataList" :key="index" :dataList="item"></FlightsItem>
            <!-- item -->
          </div>
        </div>
        <div class="paging">
          <!-- 分页器 -->
          <el-pagination
            background
            layout="sizes, prev, pager, next, jumper"
            :page-size="pageSize"
            :page-sizes="[5,8,10,50]"
            :total="cacheFilghtsData.flights.length"
            @current-change="currentChange"
            @size-change="sizeChange"
          ></el-pagination>
        </div>
      </el-col>
      <el-col :span="6">
        <div>
          <!-- 历史 -->
          <FlightsHistory @historyClick="historyClick"></FlightsHistory>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import FlightsHeader from "../../components/air/FlightsHeader";
import FlightsItem from "../../components/air/FlightsItem";
import FlightSelect from "../../components/air/FlightsSelect";
import FlightsHistory from "../../components/air/FlightsHistory";
export default {
  data() {
    return {
      // 获取到的总数据
      filghtsData: {},
      cacheFilghtsData: {},
      pageIndex: 1,
      pageSize: 8,
      loading: ""
    };
  },
  methods: {
    // 获取数据列表
    getFlightsList(item) {
      // 能够获取到 url 上面带过来的参数
      // console.log(this.$route.query);
      if (!item) {
        item = this.$route.query;
      }
      this.$axios({
        url: "/airs",
        params: item
      }).then(res => {
        console.log("res: ", res);
        // console.log(res);
        this.filghtsData = res.data;
        this.cacheFilghtsData = { ...this.filghtsData };
        // this.initDataList(res.data.flights);
        // this.dataList = res.data.flights;
      });
    },
    // currentPage 改变时会触发
    currentChange(index) {
      // console.log('index: ', index);
      // console.log('this.filghtsData.flights.length: ', this.filghtsData.flights.length);
      this.pageIndex = index;
    },
    // sizeChange 显示多少条
    sizeChange(size) {
      this.pageSize = size;
      // console.log('size: ', size);
    },
    // 筛选组件传过来的
    filterData(arr) {
      console.log("arr: ", arr);
      console.log("arr.length == 0: ", arr.length == 0);
      if (arr.length == 0) {
        this.loading = true;
        setTimeout(() => {
          this.$message({
            message: "很抱歉 当前筛选无机票",
            type: "warning"
          });
          this.loading = false;
          this.cacheFilghtsData = { ...this.filghtsData };
        }, 500);
      }
      this.cacheFilghtsData.flights = arr;
    },
    // 历史查询组件Click
    historyClick(item) {
      // console.log('item: ', item);
      // this.$route.query = item
      // console.log('this.$route.query: ', this.$route.query);
      this.getFlightsList(item);
    }
  },
  mounted() {
    this.getFlightsList();
  },
  // 机票列表数据 用于渲染机票列表
  computed: {
    dataList() {
      if (this.cacheFilghtsData.flights) {
        const start = (this.pageIndex - 1) * this.pageSize;
        // 结束的地方
        const end = start + this.pageSize;
        // // console.log(this.cacheFilghtsData.flights.slice(start, end));
        // console.log("start: ", start);
        // console.log("end: ", end);
        return this.cacheFilghtsData.flights.slice(start, end);
      } else {
        return [];
      }
    }
  },
  components: {
    FlightsHeader,
    FlightsItem,
    FlightSelect,
    FlightsHistory
  }
};
</script>

<style lang="less" scoped>
// // 动画
// .nuts-cake-enter-active {
//   // transition: all .3s ease;
//   transition: all 1s;
// }
// .nuts-cake-leave-active {
//   //  height: 70px;
//   // overflow: hidden;
//   // transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
//   transition: all 1s;
// }
// .nuts-cake-enter,
// .nuts-cake-leave-to {
//   /* .slide-fade-leave-active for below version 2.1.8 */
//   // transform: translateX(10px);
//   opacity: 0;
//   // height: 0;
// }
// // .nuts-cake-leave-to {
// //  height: 0;
// // }
// .seat_son_No {
//   height: 1px !important;
//   transition: 1s;
// }
// .seat_son_Yes {
//   height: 70px !important;
//   transition: 1s;
// }
// CSS
.ticket_main {
  width: 1000px;
  margin: auto;
  .ticket_left {
    > div {
      width: 100%;
    }
  }
}
</style>